<template>
	<div>
    	<router-view></router-view>
		<div class="contain">
			<div class="headTitle">骑士卡插件调试页</div>
			<ol class="debugContain">
				<li v-for="(item,idx) in debugList" v-bind="item" :key="idx" >
					<button class="debugItemContainer" @click="didSelectDebugItem(item)" v-bind:v-model="item">{{item.title}}</button>
				</li>
			</ol>
		</div>
    </div>
</template>


<script>
  	export default {
		methods:{
			didSelectDebugItem:function (item) {
				this.$router.push(item.link)
			}
		},
		mounted(){
			console.log('window zzcjsbridge info:'+window.zzcjsbridge)
			console.log('window dsbridge info:' + window.dsBridge)
		},

		data(){
			return {
				debugList : [
					{'title': '骑士卡跳转到指定地址','link':'/addressdebug'},
					{'title': 'cordova插件调试','link':'/cordovaplugin'},
					{'title': 'dsbridge插件调试','link':'/dsbridgeplugin'}
				] 
        	}
		}
  	}
</script>

<style>

	.headTitle{
		margin-top: 10px;
		display: flex;
		justify-content: center;
		font-size: 18px;
		font-weight: 600;
	}

	.debugContain{
		display: flex;
		flex-direction: column;
		margin-top: 0;
		padding-left: 14px;
		padding-right: 14px;
		list-style-type: none;
	}

	.debugItemContainer{
		  margin-top: 10px;
		  width: 100%;
		  align-self: center;
		  height: 44px;
		  text-align: center;
  		  border: 1px solid green;
		  line-height: 30px;
		  font-size: 16px;
		  font-weight: 600;
		  border-radius: 3px;
	}
  	
	  .contain{
		  flex-direction: column;
		  display: flex;
		  width: 100%;
		  height: 100vh;
		  /* background-color: powderblue; */
	  }

	  .startBtn{
		  align-self: center;
		  height: 44px;
		  text-align: center;
		  width: 80%;
  		  border: 1px solid green;
		  line-height: 30px;	
	  }
	  

</style>

